<template>
	<view class="video-play-wrap">
		<view class="header">
			<uni-nav-bar leftIcon="arrowleft" :title="title" @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<view class="content">
			<view class="video-title">
				<text>{{title}}</text>
			</view>
			<view class="video-wrap">
				<video id="video" :src="hlsUrl" object-fit="cover" controls autoplay="true" @play="play"></video>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '../../http/md5/md5.js'
	export default {
		data() {
			return {
				hlsUrl: '',
				title: '',
				cameraNvrIp: '',
				channel: '',
				multimediaOuterIp: '',
				multimediaOuterPort: '',
			}
		},
		onLoad(option) {
			console.log('######video play option######', option)
			let {cameraNvrIp, channel, multimediaOuterIp, multimediaOuterPort, title} = option
			this.cameraNvrIp = 	cameraNvrIp
			this.channel = channel
			this.multimediaOuterIp = multimediaOuterIp
			this.multimediaOuterPort = multimediaOuterPort
			this.title = title
		},
		onReady() {
			this.init()
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			init () {
				let md5Value = this.getMd5(this.cameraNvrIp, '554', this.channel)
				console.log('md5Value__::', md5Value)
				this.hlsUrl = `http://${this.multimediaOuterIp}:${this.multimediaOuterPort}/live/${md5Value}/hls.m3u8?token=${md5Value}`
				console.log('this.hlsUrl', this.hlsUrl)
			},
			getMd5(nvrIp, nvrPort, channel) {
				let result = md5(nvrIp + nvrPort + channel)
				return result
			},
			play(e) {
				this.videoContext = uni.createVideoContext('video')
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-play-wrap {
		.content {
			padding: 20rpx 36rpx;
			.video-title {
				padding: 20rpx 0rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
			.video-wrap {
				width: 100%;
				video {
					width: 100%;
				}
			}
		}
	}
</style>
